﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tareas.aspx.cs" Inherits="Tareas_Tareas" %>

<%--<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ext:Store ID="sTareas" runat="server"  
            SkipIdForNewRecords="false" 
            RemoteSort="false"
            RefreshAfterSaving="None"
            OnRefreshData="MyData_Refresh" 
            OnSubmitData="Store1_Submit" 
            OnBeforeStoreChanged="SaveHandler">
    <Reader>
        <ext:JsonReader IDProperty="Tarea">
            <Fields>
                <ext:RecordField Name="Id" />
                <ext:RecordField Name="Nombre" />
                <ext:RecordField Name="Descripcion" />
                <ext:RecordField Name="Fecha" />
            </Fields>
        </ext:JsonReader>
    </Reader>
</ext:Store>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
            div#vacio
            {
	            background-color: #e4e4e4;
	            border: 1px solid black;
	            width: 280px;
	            padding: 0px;
	            padding-top: 0px;
	            padding-left: 0px;
	            padding-right: 0px;
	            padding-bottom: 0px;
            }
 
            div#div_completado
            {
	            position: relative;
	            top: 0px;
	            left: 0px;
	            background-color: #9af;
	            width: 0px;
	            padding-top: 5px;
	            padding: 0px;
            }
 
            div#div_barra
            {
	            position: relative;
	            top: 0px;
	            left: 2px;
	            color: #000;
	            padding: 0px;
	            padding-top: 0px;
	            font-family: Verdana, Geneva, sans-serif;
	            font-size: 14px;
            }
 
            div#div_boton
            {
	            position: relative;
	            top: 0px;
	            left: 0px;
	            height: 30px;
	            text-align: center;
	            padding: 0px;
	            padding-top: 5px;
	            font-family: Verdana, Geneva, sans-serif;
	            font-size: 14px;
            }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Slate">
    </ext:ResourceManager>
    <ext:Viewport ID="Viewport1" runat="server">
        <Items>
        <ext:BorderLayout ID="BorderLayout1" runat="server">
                <Center>
                    <ext:GridPanel runat="server" Border="false" ID="gpPerfilProyecto" StoreID="sTareas" 
                        Height="380" EnableColumnHide="false" StripeRows="true" TrackMouseOver="true" AutoExpandColumn="Descripcion">
                        <TopBar>
                            <ext:Toolbar ID="tobListadoTareas" runat="server">
                                <Items>
                                 
                                            <ext:Button ID="Button1" runat="server" Text="Add record" Icon="Add">
                                                <Listeners>
                                                    <Click Handler="NewRecord(#{gpPerfilProyecto});" />
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button ID="Button2" runat="server" Text="Delete selected" Icon="Delete">
                                                <Listeners>
                                                    <Click Handler="EliminarRegistro()" />
                                                </Listeners>
                                            </ext:Button>  
                                            <ext:Button ID="Button6" runat="server"  Text="Save" Icon="Disk">
                                                <Listeners>
                                                    <Click Handler="#{gpPerfilProyecto}.save();" />
                                                </Listeners>
                                            </ext:Button>
                                                      
                                            <ext:ToolbarFill ID="ToolbarFill1" runat="server" /> 
                                            <ext:Label ID="LblTotal" Text="Avance General  :" runat="server"/>
                                          
                                            <ext:Slider 
                                                ID="Slider1" 
                                                runat="server" 
                                                MinValue="0" 
                                                MaxValue="100" 
                                                Increment="1" 
                                                Width="250">
                                                <Plugins>
                                                    <ext:SliderTip ID="SliderTip1" runat="server" />
                                                </Plugins>
                                                <Listeners>
                                                    <Change Handler="" />
                                                    <ChangeComplete Handler="" />
                                                </Listeners>
                                            </ext:Slider>           
                                           
                                    </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <ColumnModel ID="clmListadoTareas" runat="server">
                            <Columns>
                                <ext:RowNumbererColumn Width="20"></ext:RowNumbererColumn>
                                <ext:Column ColumnID="NombreProyecto" Header="Tarea" Width="200" DataIndex="Nombre" >
                                  <Editor>
                                            <ext:TextField ID="txtNombreProyecto" runat="server" />
                                  </Editor>
                                </ext:Column>
                                <ext:Column ColumnID="Descripcion" Header="Estado" Width="300" DataIndex="Descripcion" >
                                  <Editor>
                                            <ext:TextField ID="TextField1" runat="server" />
                                  </Editor>
                                </ext:Column>
                                 <ext:Column Header="Fecha Inicio" Width="145" Sortable="true" DataIndex="FechaFin">
                                    <Renderer Fn="Ext.util.Format.dateRenderer('j \\de F \\de\\l Y')" />
                                        <Editor>
                                             <ext:DateField ID="DateField1" runat="server" FieldLabel="Fecha Inicio" Vtype="daterange"
                                                                        AllowBlank="false" Format="dd-MMM-yyyy" ReadOnly="true">
                                                       <Listeners>
                                                       </Listeners>
                                             </ext:DateField>
                                        </Editor>
                                </ext:Column>
                                 <ext:Column Header="Fecha Fin" Width="145" Sortable="true" DataIndex="FechaFin">
                                    <Renderer Fn="Ext.util.Format.dateRenderer('j \\de F \\de\\l Y')" />
                                        <Editor>
                                             <ext:DateField ID="dFechaDesde" runat="server" FieldLabel="Fecha Inicio" Vtype="daterange"
                                                                        AllowBlank="false" Format="dd-MMM-yyyy" ReadOnly="true">
                                                                        <Listeners>
                                                                        </Listeners>
                                             </ext:DateField>
                                        </Editor>
                                </ext:Column>
                                <ext:Column ColumnID="ID" Header="Avance" DataIndex="Id" Width="50">
                                    <Editor>
                                         <ext:NumberField  ID="numberInput" runat="server">
                                             <Listeners>
                                                <Change Handler="validateTotal(#{gpPerfilProyecto},#{numberInput});" />
                                             </Listeners>
                                          </ext:NumberField>
                                   </Editor>
                                 </ext:Column>
                                 <ext:Column ColumnID="ID" Header="" DataIndex="Id" Width="325">
                                    <Renderer Fn="GetDinamicImage" />
                                     <Editor>
                                            <ext:TextField ID="TextField2" runat="server" />
                                     </Editor>
                                </ext:Column>
                          </Columns>
                        </ColumnModel>
                        <LoadMask ShowMask="true" />
                        <SaveMask ShowMask="true" />
                        <%--<DirectEvents>
                                <Command OnEvent="Editar_Click">
                                     <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{gpPerfilProyecto}.body}" />
                                            <ExtraParams>
                                                    <ext:Parameter Name="id" Value="record.data.Id" Mode="Raw" />
                                                    <ext:Parameter Name="operacion" Value="Editar" />
                                            </ExtraParams>
                                     </Command>
                       </DirectEvents>--%>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel" runat="server" SingleSelect="true">
                            </ext:RowSelectionModel>
                        </SelectionModel>
                        <Plugins>
                               
                        </Plugins>
                        <BottomBar>
                            <ext:Toolbar ID="Toolbar1" runat="server">
                                <Items>
                                     <ext:Label Text="100" runat="server"/>
                                     <ext:Slider  ID="SliderTotal" runat="server" minValue="0"   maxValue="100"  width="550">
                                     </ext:Slider>
                                </Items>
                            </ext:Toolbar>
                        </BottomBar>
                        <Listeners>
                                <Render Handler="ViewTotal();" />
                             
                        </Listeners>
                     </ext:GridPanel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>
  
  </form>
</body>
</html>

<ext:Window ID="wListadoTareas" runat="server" Title="Listado de Tareas" Hidden="true"
    CenterOnLoad="true" Y="10" Modal="true" BodyStyle="padding:10px;" Width="600"
    AutoHeight="true" ButtonAlign="Center">
    <Items>
        <ext:FormLayout ID="FormLayout8" runat="server" LabelAlign="Left" LabelWidth="160">
            <ext:Anchor Horizontal="100%">
                <ext:Panel ID="Pane1" runat="server" AutoHeight="true" Border="false">
                    <Items>
                        <ext:ColumnLayout ID="ColumnLayout1" runat="server">
                            <ext:LayoutColumn ColumnWidth=".5">
                                <ext:Panel ID="Panel3" runat="server" Border="false" Header="false" BodyStyle="padding:10px;">
                                    <Items>
                                        <ext:FormLayout ID="FormLayout2" runat="server" LabelAlign="left" LabelWidth="50">
                                            <ext:Anchor Horizontal="100%">
                                                <ext:TextField ID="txtNombre" runat="server" FieldLabel="Nombre">
                                                </ext:TextField>
                                            </ext:Anchor>
                                        </ext:FormLayout>
                                    </Items>
                                </ext:Panel>
                            </ext:LayoutColumn>
                            <ext:LayoutColumn ColumnWidth=".5">
                                <ext:Panel ID="Panel4" runat="server" Border="false" Header="false" BodyStyle="padding:10px;">
                                    <Items>
                                        <ext:FormLayout ID="FormLayout3" runat="server" LabelAlign="left" LabelWidth="50">
                                            <ext:Anchor Horizontal="100%">
                                                <ext:TextField ID="txtFecha" FieldLabel="Fecha" runat="server">
                                                </ext:TextField>
                                            </ext:Anchor>
                                        </ext:FormLayout>
                                    </Items>
                                </ext:Panel>
                            </ext:LayoutColumn>
                        </ext:ColumnLayout>
                    </Items>
                </ext:Panel>
            </ext:Anchor>
            <ext:Anchor Horizontal="100%">
                <ext:Panel ID="Panel1" runat="server" AutoHeight="true" Border="false" BodyStyle="padding:10px;">
                    <Items>
                        <ext:FormLayout ID="FormLayout1" runat="server" LabelAlign="Top">
                            <ext:Anchor Horizontal="100%">
                                <ext:TextArea ID="txtDescripcion" runat="server" FieldLabel="Descripción">
                                </ext:TextArea>
                            </ext:Anchor>
                        </ext:FormLayout>
                    </Items>
                </ext:Panel>
            </ext:Anchor>
            <ext:Anchor Horizontal="100%">
                <ext:Panel ID="Panel2" runat="server" AutoHeight="true" Border="false" BodyStyle="padding:10px;">
                    <Items>
                        <ext:FormLayout ID="FormLayout4" runat="server" LabelAlign="Left" LabelWidth="60">
                            <ext:Anchor Horizontal="100%">
                                <ext:RadioGroup runat="server" ID="Estado" FieldLabel="Estado" HideLabel="false"
                                    LabelSeparator="">
                                    <Items>
                                        <ext:Radio ID="Estado1" runat="server" BoxLabel="Estado1" HideLabel="false" />
                                        <ext:Radio ID="Radio1" runat="server" BoxLabel="Estado2" HideLabel="false" />
                                        <ext:Radio ID="Radio2" runat="server" BoxLabel="Estado3" HideLabel="false" />
                                    </Items>
                                </ext:RadioGroup>
                            </ext:Anchor>
                        </ext:FormLayout>
                    </Items>
                </ext:Panel>
            </ext:Anchor>
        </ext:FormLayout>
    </Items>
    <Buttons>
        <ext:Button runat="server" ID="btnAceptar" Text="Aceptar" Icon="Accept">
            <%--<DirectEvents>
                                            <Click OnEvent="btnAceptar_Click">
                                                <EventMask ShowMask="true" />
                                            </Click>
                                        </DirectEvents>--%>
        </ext:Button>
        <ext:Button runat="server" ID="btnCancelar" Text="Cancelar" Icon="Decline">
            <%--<DirectEvents>
                                            <Click OnEvent="btnCancelar_Click">
                                                <EventMask ShowMask="true" />
                                            </Click>
                                        </DirectEvents>--%>
        </ext:Button>
    </Buttons>
   
</ext:Window>

 <script type="text/javascript" language="javascript">
     /*
     * RowSelectionModel:Obtener index del row seleccionada.
     */
     Ext.grid.RowSelectionModel.override({
         getSelectedIndex: function () {
             return this.grid.store.indexOf(this.selections.itemAt(0));
         }
     });
     
     var GetImage = function (value) {
         value = value * 10;
         return "<img src='../resources/images/task_advances/" + value + ".gif' width='325' alt='" + value + " %'/>";
     }
     var GetDinamicImage = function (value) {
         value = value;
         width = (value / 100) * 250;
         return "<div align='center'><div id='vacio' align='left'> <div id='div_completado' style='width : " + width + "px;'><div id='div_barra'>" + value + "%</div></div> </div></div>";
     }
     var exportData = function (selectedOnly) {
         var store = gpPerfilProyecto.store;

         store.directEventConfig.isUpload = true;
         gpPerfilProyecto.submitData({ selectedOnly: selectedOnly });
         store.directEventConfig.isUpload = false;
     };

     var selectRecord = function (id) {
         var grid = gpPerfilProyecto,
                record = grid.store.getById(id);

         grid.store.openPage(record, function () {
             grid.getSelectionModel().selectRow(grid.store.indexOf(record));
         });

         alert('Aqui......');
     };
     
     function ConfirmDelDoc(btn) {
          if(btn=='ok') {
                gpPerfilProyecto.deleteSelected();
                gpPerfilProyecto.save();
          }
      };
      
      var EliminarRegistro = function() {
            Ext.MessageBox.show({
               title:"Eliminar Documento",
               msg: "Esta seguro de eliminar el item seleccionado?",
               buttons: Ext.MessageBox.OKCANCEL,
               fn: ConfirmDelDoc,
               icon: Ext.MessageBox.WARNING
           });        
        }

        var getSumTotal = function (grid, _index_g) {

            var _valSum = 0;
            var _valPar = 0;
            var r = null;
            for (var j = 0, jlen = grid.store.getCount(); j < jlen; j++) {
                if (j != _index_g) {
                    r = grid.store.getAt(j);
                    _valPar = parseInt(r.get('Id'));
                    if (isNaN(_valPar))
                        _valPar = 0;
          
                    _valSum += _valPar;

                }
            }
            return (_valSum);

        }

        var validateTotal = function (grid, val) {
            try {
                var _tParcial = parseInt(val.getValue());
               
                var _index_g = grid.getSelectionModel().getSelectedIndex();


                var _valSum = getSumTotal(grid,_index_g)

                _tParcial += _valSum;

                if (_tParcial > 100) {

                    if (_valSum < 100)
                        _valSum = 100 - _valSum;
                    else
                        _valSum = 0; 
                    val.setValue(_valSum);
                }


            } catch (ie) {
                alert(ie);
            }
        };

        function NewRecord(grid) 
        {
            try {

                     var sum = getSumTotal(grid, -1);

                     if (sum <= 100) {
                         var jlen = grid.getSelectionModel().getSelectedIndex();
                      
                         if (jlen != -1) 
                         {
                             jlen += 1;
                         }
                         else 
                         {
                             jlen = grid.store.getCount();
                         }

                         grid.insertRecord(jlen, { ID: 0 });
                         grid.startEditing(0,0);
                     }
                     else 
                     {

                         alert(sum);
                         Ext.MessageBox.show({
                             title: "Aviso",
                             msg: "No se puede agregar <TAREAS> adicionales",
                             buttons: Ext.MessageBox.OK,
                             icon: Ext.MessageBox.WARNING
                         });        
                     }
            } catch (ie) {
                alert(ie);
            }
        };

        var ViewTotal = function () {
            try {
                var t = getSumTotal(gpPerfilProyecto, -1);
                alert('TOTAL='+t);
                // SliderTotal.SetValue(t);

            } catch (ie) {
                alert(ie);
            }
        };


</script>
